<template>
  <div>
            <li id="onesong"  v-for="item in songarr">
                 <router-link :to="{path:'/yunyin/asong',query:{keyword:item.id}}"><div id="onename">{{item.name}}</div> </router-link>
                 <router-link :to="{path:'/yunyin/search',query:{keyword:item.ar[0].name}}"><div id="onesonger">{{item.ar[0].name}}</div></router-link>
                 <router-link :to="{path:'/yunyin/search',query:{keyword:item.al.name}}"><div id="onesongbox">{{item.al.name}}</div></router-link>
                <div id="onesongtime"><span class="songico" @click=" playicocpn(item.name,item.ar[0].name,item.id)">&#xe60d;</span><span class="songico">&#xe629;</span><span class="songico">&#xe603;</span></div>
            </li>
        </div>
</template>

<script>
import axios from'axios'
export default {
        name :'song',
        data(){
            return{
                id: "2872125986",
                songid: '25542198',
                songname: "",
                songal: "",
                songer: "",
                songarr: '',
                url: "",
            }
        },
        mounted:function(){
            this.loading();
        },
           methods:{
                strchange: function(m, n) {
                    let ms = m + '';
                    if (ms.length > n) {
                        let a = ms.slice(0, n - 1);
                        a = a.concat('...')
                            // console.log(a)
                        return a;
                    } else {
                        return ms
                    }

                },
            playicocpn(a,b,c) {
                    let that = this;
                    console.log(a,b,c);
                    axios.get("http://39.101.203.189:3000/song/url?id=" + c).then(function(response) {
                        console.log(response.data.data[0].url,a,b)
                         let muname=a;
                        let muar=b;
                        let muurl=response.data.data[0].url;
                        const mu={muname,muar,muurl};
                    that.$store.commit('getaudio',mu);
                    }, function(err) {})
                },
                loading: function() {
                    let that = this;
                    axios.get("http://39.101.203.189:3000/playlist/detail?id=" + this.$route.query.sheetid).then(function(response) {
                        console.log(response.data.playlist);
                        let res0 = response.data.playlist;
                        let res = res0.tracks;
                        for (let i = 0; i < res.length; i++) {
                            res[i].name = that.strchange(res[i].name, 27);
                            res[i].ar[0].name = that.strchange(res[i].ar[0].name, 12);
                            res[i].al.name = that.strchange(res[i].al.name, 20);
                        }
                        that.songarr = res;
                        console.log(res[1].id);
                    }, function(err) {})
                },
        },
}
</script>

<style scoped>
 
@import '.././assets/fontico/iconfont.css';
    #onesong {
     position: relative;
     height: 50px;
     width: 850px;
     list-style: none;
 }
 
 #onename {
     position: relative;
     width: 334px;
     height: 40px;
     padding-top: 10px;
     color: #fff;
     opacity: 0.9;
     font-size: 17px;
     /* background-color: aqua; */
     display: inline-block;
 }
 
 #onesonger {
     position: relative;
     padding-top: 10px;
     color: #fff;
     opacity: 0.9;
     font-size: 17px;
     width: 134px;
     height: 40px;
     /* background-color:#777576; */
     display: inline-block;
 }
 
 #onesongbox {
     position: relative;
     padding-top: 10px;
     color: #fff;
     opacity: 0.9;
     font-size: 17px;
     width: 206px;
     height: 40px;
     /* background-color:#fff; */
     display: inline-block;
 }
 
 #onesongtime {
     position: relative;
     padding-top: 10px;
     color: #fff;
     opacity: 0.6;
     font-size: 17px;
     width: 60px;
     height: 40px;
     /* background-color:#777576; */
     display: inline-block;
 }
  #onesonger:hover,#onesongbox:hover,#onename:hover{
      color:#750310;
  }
  .songico {
     font-family: "iconfont" !important;
     font-size: 20px;
     margin-right: 20px;
     color: aliceblue;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     cursor: default;
 }
</style>